<template>
  <div class="" style="padding: 20px">
    <!--    <div @click="closePage"-->
    <!--         style="border: 1px solid #2C8DEB;text-align: center;color: #2C8DEB; margin-bottom: 20px;-->
    <!--      border-radius: 5px;padding: 10px;width: 100px;font-size: 16px;cursor: pointer;">-->
    <!--      返回-->
    <!--    </div>-->
    <el-button type="primary" size="mini" style="width: 60px" @click="closePage">返回</el-button>
    <div style="text-align: center;">
      <div style="font-size: 30px;font-weight: 400;color: #333333;line-height: 54px;">
        {{ notifyData.title }}
      </div>

      <div style="color: #999999;font-size: 16px;margin-top: 20px;">
        发布日期：{{ parseTime(notifyData.publishTime, '{y}-{m}-{d}') }}
      </div>

      <div style="margin-top:10px;border-bottom:1px solid rgba(215,215,215,0.63)"></div>
    </div>
    <div class="ql-editor" style="margin-left: 50px;margin-top: 20px">
      <div v-html="notifyData.content">
      </div>
      <div v-if="notifyData.fileUrl" style="display: flex;align-items: center;margin-top: 10px">
        下载：
        <div
          style="background-color: #E8F3FE;color: #1E8BFC;padding: 5px 15px;border-radius: 4px;font-size: 14px;cursor: pointer"
          @click="handleDownload">
          附件
        </div>
      </div>
    </div>

    <el-row v-if="notifyData.answerType==='1'" :gutter="13">
      <p></p>

      <el-form ref="elForm" :rules="rules" :model="formData" size="small" label-width="100px">

        <el-col :span="24">
          <el-form-item label="回复:" prop="answerContent">
            <vue-editor useCustomImageHandler placeholder="请输入回复内容" @image-added="handleImageAdded"
              v-model="formData.answerContent"></vue-editor>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="附件:" prop="uploadFileList">
            <el-upload style="display: flex;align-items: center" ref="upload" :file-list="formData.uploadFileList"
              :auto-upload="false" :action="uploadTheAddress" :on-success="handleFileSuccess" :headers="Authorization"
              :on-error="handleFileError" :on-change="handleChange" :on-remove="handleRemove" :on-exceed="handleExceed"
              :before-upload="uploadInspect" :limit="1">
              <el-button :disabled="disabled" size="small" type="primary" icon="el-icon-upload">选择文件</el-button>
            </el-upload>
            <div style="margin-top: 10px" class="el-upload__tip">提示：只能上传一个不超过50MB的文件</div>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" :disabled="disabled" @click="submitForm1">{{ answerText }}</el-button>
            <el-button :disabled="disabled" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
  import {
    updateNotifination_user
  } from "@/api/patrol/notifination_user";

  import {
    getToken
  } from "@/utils/auth";
  import {
    parseTime
  } from "@/utils/ruoyi";
  import {
    VueEditor
  } from "vue2-editor";
  import axios from "axios";

  export default {
    components: {
      VueEditor
    },
    name: 'SchoolNotifyDetail',
    props: [],
    data() {
      return {
        // 遮罩层
        loading: true,
        number: 0,
        //回复按钮
        disabled: false,
        answerText: '回复',
        notifyData: {},
        Authorization: {
          Authorization: getToken()
        },
        formData: {
          id: '',
          answerContent: '',
          uploadFileList: [],
          answerTime: '',
          readStatus: ''
        },
        rules: {
          answerContent: [],
          uploadFileList: [],
        },
        uploadTheAddress: process.env.VUE_APP_BASE_API + "/common/upload",
      }
    },
    computed: {},
    watch: {},
    created() {
      this.loading = true;
      this.notifyData = JSON.parse(decodeURI(this.$route.query.notify))
      this.formData.id = this.notifyData.id
      if (this.notifyData.readStatus === '0') {
        let data = {
          id: this.notifyData.id,
          readStatus: '1',
          readTime: parseTime(new Date()),
        }
        this.changeStatus(data)
      }

      if (this.notifyData.readStatus === '2') {
        this.formData.answerContent = this.notifyData.answerContent
        this.disabled = true
        this.answerText = '已回复'
      }
    },
    mounted() {},
    methods: {
      submitForm1() {
        if (new Date(this.notifyData.deadlineTime) < Date.now()) {
          this.msgError('很抱歉，回复时间已截止！')
          return
        }

        if (this.number > 0) {
          this.$refs.upload.submit();
        } else {
          this.submitForm();
        }
      },
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          this.formData.readStatus = '2'
          this.formData.answerTime = parseTime(new Date())
          this.changeStatus(this.formData, true)

        })
      },
      handleFileSuccess(response, file, fileList) {
        console.log(response, file, fileList)
        if (response.code === 200) {
          this.$set(this.formData, "answerFileUrl", response.fileName)
          this.submitForm();
        }
      },
      handleFileError(error, file, fileList) {
        this.console.log(error, file, fileList)
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，已选择了 ${fileList.length} 个文件`);
      },
      handleChange(files, fileList) {
        this.number = fileList.length
      },
      handleRemove(files, fileList) {
        this.number = fileList.length
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      uploadInspect(file) {
        let isRightSize = file.size / 1024 / 1024 < 50
        if (!isRightSize) {
          this.$message.error('文件大小超过 50MB')
        }
        // let isAccept = new RegExp('.doc,.docx').test(file.type)
        // if (!isAccept) {
        //   this.$message.error('应该选择.doc,.docx类型的文件')
        // }
        return isRightSize
      },
      handleDownload() {
        // var name = row.fileName;
        let name = "附件";
        let url = process.env.VUE_APP_BASE_API + this.notifyData.fileUrl;
        let suffix = url.substring(url.lastIndexOf("."), url.length);
        const a = document.createElement('a')
        a.setAttribute('download', name + suffix)
        a.setAttribute('target', '_blank')
        a.setAttribute('href', url)
        a.click()
      },
      //修改通知内容
      changeStatus(data, type) {
        this.loading = true;
        updateNotifination_user(data).then(res => {
          if (type === true && res.code === 200) {
            this.msgSuccess("回复成功");
            this.$tab.closeOpenPage({
              path: "/notify/schoolNotify"
            }).then(() => {
              this.$tab.refreshPage()
            });
          } else {
            console.log("操作成功")
          }
        })
        this.loading = false;
      },
      handleImageAdded(file, Editor, cursorLocation, resetUploader) {
        //formDta是个对象，用来模拟表单的
        let formData = new FormData()
        formData.append('file', file)
        //上传图片并回显
        axios({
          url: process.env.VUE_APP_BASE_API + "/common/upload",
          method: 'POST',
          headers: this.Authorization,
          data: formData
        }).then(res => {
          //这两行是关键代码了。在鼠标位置插入图片，数据存的是url
          Editor.insertEmbed(cursorLocation, 'image', res.data.url)
          resetUploader()
        }).catch(err => {
          console.log(err)
        })
      },
      //关闭页面
      closePage() {
        this.$store.dispatch('tagsView/delView', this.$route)
        // this.$router.go(-1)
        this.$tab.openPage("通知公告", "/notify/schoolNotify");
      }
    }
  }

</script>
<style scoped>
  @import "../quill.core.css";

  .el-upload__tip {
    line-height: 1.2;
    margin-top: 0;
  }

  ::v-deep .el-upload-list,
  .el-upload-list--text {
    display: flex;
    align-items: center;
  }

  ::v-deep .el-upload-list__item:first-child {
    margin-top: 0;
  }

  ::v-deep .el-upload-list__item,
  .is-ready {
    margin-left: 10px;
  }

  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item::before,
  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label::before {
    content: "常规";
  }

  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before,
  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before {
    content: "标题1";
  }

  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before,
  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before {
    content: "标题2";
  }

  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before,
  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before {
    content: "标题3";
  }

  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before,
  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before {
    content: "标题4";
  }

  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before,
  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before {
    content: "标题5";
  }

  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before,
  ::v-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before {
    content: "标题6";
  }

</style>
